(слухач зможе)
НАВЧАЛЬНИЙ ЧАС: 2 години.
Навчальна література:
| № з/п | Навчальні питання | Час, хв |
|---|---|---|
| 1 | ВСТУПНА ЧАСТИНА | 5 |
| 2 | ОСНОВНА ЧАСТИНА | 80 |
| 2.1 | Робота з посиланнями та зображеннями | 40 |
| 2.2 | Робота з діаграмами та графіками | 40 |
| 3. | ЗАКЛЮЧНА ЧАСТИНА | 5 |
Теорія - 15 хв & Практика - 25 хв
На попередньому занятті було розглянуто можливості Markdown щодо форматування тексту, створення таблиць та списків. Це дозволяє підвищити читабельність тексту та можливість акцентування та узагальнення інформації.
Якщо документ, що створюється, передбачає доступ до мережі інтернет, є можливість створення посилань на відповідні ресурси:
Введено:
1. [Посилання](https://google.com.ua)
2. [Посилання, при наведенні на яке висвічується введений текст ](https://google.com.ua "Це пошукова система")
3. Тут використовуються винесені [посилання], що доцільно щоб не захаращувати [основний] текст
[посилання]: https://google.com.ua
[основний]: https://google.com.ua "підказка"
Отримано:
- Посилання
- Посилання, при наведенні на яке висвічується введений текст
- Тут використовуються винесені посилання, що доцільно щоб не захаращувати основний текст
Для зручної роботи з великими документами є можливість створення внутрішніх посилань на відповідні частини документу
Введено:
[Заголовок питання, що розглядається](#навчальне-питання-1-робота-з-посиланнями-та-зображеннями)
Отримано:
Заголовок питання, що розглядається
Для введення посилання на заголовок у документі достатньо поставити решітку (#), а далі для отримання списку доступних посилань необхідно використати гарячі клавіші
ctrl + Space,
Слід зазначити, що така функціональність у документі Jupyter Notebook буде працювати лише у межах однієї чарунки
Продовжуючи знайомство з Markdown, розглянемо можливість розміщення зображень у документі.
У текст, що створюється за допомогою мови розмітки Markdown, є можливість вставляти картинки, які можуть бути розміщені як на віддалених серверах, так і на локальному ПЕОМ. Для використання файлів картинок, розміщених на локальному ПЕОМ необхідно надавати посилання на відповідну теку, де вони знаходяться. Ось приклад таких дій:
Введено:

Отримано:
Рис. 1.1
Синтаксис такого запису передбачає наступну конструкцію:
![alt] - де alt текст який буде виводитися якщо картинка з будь-яких причин не може бути завантажена;(arg_1 arg_2) - arg_1 - відносний / абсолютний шлях до файлу з картинкою, arg_2 - текст, який буде показуватися при наведенні на картинку курсором.Крім статичних картинок є можливість виведення і анімованих картинок, типу *.gif
Введено:

Отримано:
Рис. 1.2
У випадку необхідності змінити розмір зображення необхідно застосовувати правила мови розмітки HTML
Введено:
// Тут зображення виводиться за замовчуванням по лівому краю сторінки
<img src="./fig_3_1.avif" height="100" alt="Тут вказана назва картинки" />
// Для виведення зображення по центру потрібно ввести додатковий контейнер
<div style="display:flex;justify-content:center;">
<img src="./fig_3_1.avif" alt="Тут вказана назва картинки" />
</div>
Отримано:
Рис. 1.3
При застосуванні додаткового контейнеру:

Рис. 1.4
За необхідності зображення може бути посиланням, яке працює за розглянутими вище правилами. Для цього вираз на виведення картинки вкладається у квадратні дужки виразу, що описує посилання
Введено:
[](#посилання)
Отримано:
Практичне завдання 1
- Створити документ, який містить опис та посилання у вигляді логотипу на сайт військового інституту, а також опис і посилання на сайт кафедри.
- При розробці документу використати форматування для власних назв.
Теорія - 15 хв & Практика - 25 хв
Для роботи з графікою одним із способів є застосування синтаксису застосунку Mermaid. У випадку роботи у редакторі VS Code необхідно встановити розширення Markdown Preview Mermaid Support, що дозволяє переглянути результати введення.
Рис. 1.5.
Mermaid передбачає використання кількох типів графічних відображень. Розглянемо деякі з них. Синтаксис для створення графічних схем достатньо простий, для цього код для побудови запланованого зображення записується у потрійні зворотні лапки,наприклад:
Введено:
```mermaid
flowchart TD
A --> B;
A --- C;
A --o D;
A <--> E;
```
Отримано:
flowchart TD A --> B; A --- C; A --o D; A <--> E;
Рис. 1.6.
Для цього у потрійних лапках пишеться, що це фрагмент для обробки розширенням mermaid, а також тип схеми flowchart. Надалі описуються відповідного типу зв'язки між сутностями (A, B, C, D, E).
Символи, що вводяться, можна розширити більш змістовними описами. Для цього після символу у квадратних дужках пишеться текст:
Введено:
```mermaid
flowchart TD
A[об'єкт] --> B;
A --- C;
A --o D;
A <--> E;
```
Отримано:
flowchart TD A[об'єкт] --> B; A --- C; A --o D; A <--> E;
Рис. 1.7.
Прямокутники, які виводяться за замовчуванням, можна змінити іншими фігурами. Список наведено нижче:
Введено:
```mermaid
flowchart TD
A --> B[[B]];
A --- C(C);
A --o D((D));
A <--> E{E};
A --x F[(F)];
A --- G[/G\];
A --- J[/J/];
A --- K[\K/];
A --- L[L];
```
Отримано:
flowchart TD A --> B[[B]]; A --- C(C); A --o D((D)); A <--> E{E}; A --x F[(F)]; A --- G[/G\]; A --- J[/J/]; A --- K[\K/]; A --- L[L];
Рис. 1.8.
За необхідності напрямок потоку, який вказується після службового слова flowchart наприклад:
Введено:
```mermaid
flowchart LR
A[об'єкт] --> B;
A --- C;
```
Отримано:
flowchart LR A[об'єкт] --> B; A --- C;
Рис. 1.9.
Що відповідає наступному:
Лінії, які з'єднують також можуть бути різними:
Введено:
```mermaid
flowchart LR
A -.-> B;
A === C;
A ~~~ D;
```
Отримано:
flowchart LR A -.-> B; A === C; A ~~~ D;
Рис. 1.10.
Для ліній зв'язку також передбачено введення коментарів:
Введено:
```mermaid
flowchart LR
A -. Коментар .-> B;
A == коментар === C;
A -- коментар --> D;
```
Отримано:
flowchart LR A -. Коментар .-> B; A == коментар === C; A -- коментар --> D;
Рис. 1.11.
За необхідності введені фігури можуть бути посиланнями, а також відображати при наведенні курсором текст
Введено:
```mermaid
flowchart LR
A -. Коментар .-> B;
A == коментар === C;
click A callback "Відображення тексту"
click B href "#посилання"
```
Отримано:
flowchart LR A -. Коментар .-> B; A == коментар === C; click A callback "Відображення тексту" click B href "#посилання"
Рис. 1.12.
Використовуючи такий тип графіки є можливість створення алгоритму
Введено:
```mermaid
flowchart TD
A[Початок] --> B{Це воно?}
B -->|Так| C[Добре]
C --> D[Обдумати]
D --> B
B ---->|Ні| E[Завершення]
```
Отримано:
flowchart TD A[Початок] --> B{Це воно?} B -->|Так| C[Добре] C --> D[Обдумати] D --> B B ---->|Ні| E[Завершення]
Рис. 1.13.
У нових версіях діаграм типу flowchart з'явилася можливість відображення додаткових форм фігур link. При цьому ускладнився синтаксис опису фігури, що складається із двох частин - форма (shape) та надпис (label). Функціональність залишається, а саме можливість встановлення зв'язків між сутностями та інше.
Введено:
```mermaid
flowchart LR
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
click E callback "Відображення тексту"
```
Отримано:
flowchart LR A@{ shape: manual-file, label: "File Handling"} B@{ shape: manual-input, label: "User Input"} C@{ shape: docs, label: "Multiple Documents"} D@{ shape: procs, label: "Process Automation"} E@{ shape: paper-tape, label: "Paper Records"} click E callback "Відображення тексту"
Рис. 1.14.
Mermaid пропонує і інші типи діаграм, які можна використовувати, наприклад типу pie
Введено:
```mermaid
pie title Індекс за версією TIOBE (січень 2025)
"Python" : 23.28
"C++" : 10.29
"C" : 8.86
"C#" : 4.45
"JavaScript" : 4.20
"Інші": 48.92
```
Отримано:
pie title Індекс за версією TIOBE (січень 2025) "Python" : 23.28 "C++" : 10.29 "C" : 8.86 "C#" : 4.45 "JavaScript" : 4.20 "Інші": 48.92
Рис. 1.15.
Є можливість також відображати дані у стовпцях, тип діаграми xychart-beta
Введено:
```mermaid
---
config:
xyChart:
width: 700
height: 400
themeVariables:
xyChart:
titleColor: "#f3456"
plotColorPalette: "#f3456, #ff0000"
---
xychart-beta
title "Індекс за версією TIOBE (січень 2025)"
x-axis [Python, C++, C, C#, JS]
y-axis "Відсоток, %" 0 --> 30
bar [23.28, 10.29, 8.86, 4.45, 4.20]
line [23.28, 10.29, 8.86, 4.45, 4.20]
```
Отримано:
--- config: xyChart: width: 700 height: 400 themeVariables: xyChart: titleColor: "#f3456" plotColorPalette: "#f3456, #ff0000" --- xychart-beta title "Індекс за версією TIOBE (січень 2025)" x-axis [Python, C++, C, C#, JS] y-axis "Відсоток, %" 0 --> 30 bar [23.28, 10.29, 8.86, 4.45, 4.20] line [23.28, 10.29, 8.86, 4.45, 4.20]
Рис. 1.16.
Практичне завдання 2
- Застосовуючи розширений синтаксис відображення фігур, розробити алгоритм моніторингу інформаційних повідомлень у відкритих ресурсах мережі інтернет.
- Згенерувати випадкові значення та побудувати графіки (діаграму та круговий) розподілу кількості повідомлень за 5 тематиками у відсотках.
Нижче приведена діаграма типу sequenceDiagram. За допомогою неї, наприклад, можна писати сценарій радіопереговорів між групами при плануванні радіогри.
sequenceDiagram box LightGray Unit A participant A as Chief A participant J as Member A end box LightBlue Unit B participant C as Chief B participant D as Member B end A->>J: Hello John, how are you? J->>A: Great! A->>C: Hello Bob, how is Charley? D->>C: Hello Charley, how are you?
Рис. 1.16.
Завдання на самостійну підготовку
- Розробити текст та сценарій радіогри для відділення.
- Оформити документ з описом у форматі Markdown та діаграмою типу
sequenceDiagram.- Включити у текст документа таблицю з відповідником: "позивний - прізвище"